<template>
    <div>
        <div class="top">
            <div class="logo">LOGO</div>
            <div style="flex: 1;"></div>
            <div class="title">登录</div>
            <div class="title titleLast">注册</div>
        </div>

        <div class="middle">
            <el-form label-width="100px" :model="ruleForm" :rules="rules" ref="registerForm" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" class="input"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" class="input"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="passwordAgain">
                    <el-input v-model="passwordAgain" class="input"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="ruleForm.phone" class="input"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.email" class="input"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { insert } from '@/api/register';
export default {
    data(){
        return{
            passwordAgain: '',
            ruleForm:{
                username: '',
                password: '',
                zhlx: 0,
                phone: '',
                email: '',
            },
            rules: {
                username:[
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                password:[
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                // passwordAgain:[
                //     { required: true, message: '请输入', trigger: 'change' }
                // ],
                phone:[
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                email:[
                    { required: true, message: '请输入', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        submit(){
            this.$refs.registerForm.validate((valid) => {
                if(valid){
                    insert(this.ruleForm).then((res) => {
                        if(res){
                            this.$message.success('注册成功');
                            this.$router.push({
                                path: '/login',
                            })
                        }
                    })
                }
                else{
                    this.$message.warning('注意必填项');
                    return ;
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.top{
    display: flex;
    justify-content: space-around; 
    align-items: center;
    font-weight: bold;
    width: 100%;
    background-color: #3d40e5;
    margin: 0 auto;
    // height: 60px;
    color: #fff;
}

.top .logo{
    padding: 20px 30px;
    margin: 0 60px;
    margin-left: 100px;
}

.top .title{
    padding: 20px 50px;
}

.top .titleLast{
    margin-right: 100px;
}
.middle{
    width: 500px;
    background-color: rgb(240, 240, 240);
    margin: 0 auto;
    padding: 50px;
}
.middle .input{
    width: 70%;
    // padding: 0 20px;
}


</style>